<template>
  <el-dialog
    top="5vh"
    width="50%"
    :title="`${editUserId ? '编辑' : '新增'}用户`"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    @close="dialogVisible = false"
    class="add_user_box"
  >
    <el-form v-loading="orcLoading" :model="userInfo" ref="formData" :rules="userRules" inline label-width="120px">
      <el-form-item label="真实名字" prop="realName">
        <el-input v-model.trim="userInfo.realName" placeholder="请输入真实名字"></el-input>
      </el-form-item>
      <el-form-item v-if="userInfo.type == 0" label="身份证号" prop="identityCard">
        <el-input v-model.trim="userInfo.identityCard" placeholder="请输入身份证号"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model.trim="userInfo.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-if="!editUserId" v-model.trim="userInfo.password" placeholder="请输入密码"></el-input>
        <el-input v-else disabled type="password" v-model.trim="userInfo.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="权重" prop="weight">
        <el-input v-model.trim="userInfo.weight" placeholder="请输入权重"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model.trim="userInfo.address" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model.trim="userInfo.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="传真" prop="fax">
        <el-input v-model.trim="userInfo.fax" placeholder="请输入传真"></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model.trim="userInfo.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="座机" prop="phone">
        <el-input v-model.trim="userInfo.phone" placeholder="请输入座机号"></el-input>
      </el-form-item>
      <el-form-item label="微信号" prop="isWeChatAccount">
        <el-input v-model.trim="userInfo.weChatAccount" placeholder="请输入微信号"></el-input>
      </el-form-item>
      <el-form-item label="QQ号" prop="qqAccount">
        <el-input v-model.trim="userInfo.qqAccount" placeholder="请输入QQ号"></el-input>
      </el-form-item>
      <el-form-item label="用户编码">
        <el-input v-model.trim="userInfo.code" placeholder="请输入编码"></el-input>
      </el-form-item>
      <el-form-item prop="sort" label="序号">
        <el-input v-model.number="userInfo.sort" placeholder="请输入序号"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model.trim="userInfo.comments" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>

    <div class="submitbtn jac">
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="formDataSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addUser, editUser, getUserById } from '@/apiList/api_power'
import { userRules } from '@/utils/tools/RegExpression.js'
import { local } from '@/utils/jcore/storage'
export default {
  name: 'EditAddUserDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    selectPid: {
      type: String,
      default: ''
    },
    editUserId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orcLoading: false,
      userRules,
      userInfo: {}
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(v) {
        this.$emit('update:show', v)
      }
    }
  },
  watch: {
    show(v) {
      if (!v) return
      if (this.editUserId) {
        // 编辑获取详情
        getUserById({
          sysUserId: this.editUserId,
          sysOverallInfo: local.get('authorityList')
        }).then((res) => {
          this.initUserInfo()
          Object.assign(this.userInfo, res)
          this.userInfo.sysOrganizeids = res.userOrganizes.map((e) => e.sysOrganizeId).toString()
        })
      } else {
        this.initUserInfo()
      }
    }
  },
  created() {
    this.initUserInfo()
  },
  methods: {
    initUserInfo() {
      this.userInfo = {
        userAvatarId: '',
        userName: '', // 用户名
        password: '', // 用户密码
        realName: '', // 真实名称
        identityCard: '', // 身份证号
        identityFrontPath: '', // 身份证正面链接
        identityBackPath: '', // 身份证反面链接
        type: '', // 性别
        gender: '', // 性别
        weight: '', // 权重
        address: '', // 地址
        email: '', // 邮箱
        fax: '', // 传真
        mobile: '', // 手机
        phone: '', // 座机
        weChatAccount: '', // 微信
        qqAccount: '', // QQ号
        headPhoto: '', // 头像
        code: '', // 编码
        sort: null, // 序号
        comments: '', // 备注
        dutys: [], // 岗位
        radio: -1,
        userAvatartId: '' //用户头像id
      }
    },
    formDataSubmit() {
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          const u = local.get('userInfo')
          if (this.editUserId) {
            const sysOrganizeids = this.userInfo.userOrganizes.map((e) => e.sysOrganizeId).toString()
            await editUser({ userInfo: this.userInfo, sysOrganizeids, sysOverallInfo: u })
          } else {
            await addUser({ userInfo: this.userInfo, sysOrganizeids: this.selectPid, sysOverallInfo: u })
          }
          this.$emit('change')
          this.dialogVisible = false
          this.initUserInfo()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.add_user_box {
  .item_box {
    width: 218px;
  }
  /deep/ .el-input {
    width: 218px;
  }
}
</style>
